const users = [
  {
    face: "https://gd-hbimg.huaban.com/5bd31276c5b4db44ce20bb5a22061165fa900ed6c2ac-zOd1NZ_fw658",
    username: "Bertir Yates",
    age: 29,
  },
  {
    face: "https://gd-hbimg.huaban.com/765e9e37950fbff54f915518b0245104ae99e2e575228-vm0bvr_fw658",
    username: "Hester Hogan",
    age: 32,
  },
  {
    face: "https://gd-hbimg.huaban.com/727e8dfaee4a1c0b94f4435ed066ae281c91ef1d8f71-d0oHUR_fw658",
    username: "Larry Little",
    age: 36,
  },
  {
    face: "https://gd-hbimg.huaban.com/f1572e8d14dcd58d685376a8876efe6d82dd4ce629346-gBlXZc_fw658",
    username: "Sean Walsh",
    age: 34,
  },
  {
    face: "https://gd-hbimg.huaban.com/c77d0ee75184ce517598af83eeffa1eb6e2c983d2c004-UBt15B_fw658",
    username: "Lola Gardner",
    age: 29,
  },
];

function addHtmlToUsers() {
  const usersPanel = document.getElementById("users-container");
  if (usersPanel !== undefined) {
    users.forEach((item) => {
      usersPanel.insertAdjacentHTML(
        "beforeend",
        userPanel(item.face, item.username, item.age)
      );
    });
  }
}

/**
 * Create a html code with users
 * @param {String} faceUrl
 * @param {String} userName
 * @param {Number} age
 * @returns {String} Html code
 */
function userPanel(faceUrl, userName, age) {
  const returnHtml = `<div class="user-panel">
          <div class="face"><img src="${faceUrl}" alt="" /></div>
          <div class="text">
            <div class="text-primary">${userName}</div>
            <div class="text-secondary">${age} years</div>
          </div>
        </div>`;
  return returnHtml;
}

addHtmlToUsers();
